<template>
  <view>
    <view
      class="imgModule"
      :style="{
        paddingTop: `${info.style.pTop * 2}rpx`,
        paddingLeft: `${info.style.pLeft * 2}rpx`,
        paddingRight: `${info.style.pRight * 2}rpx`,
        paddingBottom: `${info.style.pBottom * 2}rpx`,
        marginTop: `${info.style.mTop * 2}rpx`,
        marginLeft: `${info.style.mLeft * 2}rpx`,
        marginRight: `${info.style.mRight * 2}rpx`,
        marginBottom: `${info.style.mBottom * 2}rpx`,
      }"
    >
      <view
        class="hot"
        v-for="(hot, indexs, keys) in info.hotData"
        @click="imgChange(hot)"
        :style="{
          width: `${hot.w}px`,
          height: `${hot.h}px`,
          left: `${hot.x}px`,
          top: `${hot.y}px`,
          zIndex: `${indexs + 99}`,
        }"
      >
        <view>{{ hot.name }}</view>
      </view>
      <view
        class="info1"
        v-for="(i, index, key) in info.value"
        v-if="info.type.value == 1"
        :key="key"
        @click="imgChange(i)"
      >
        <image
          :src="i.link"
          alt=""
          mode="widthFix"
          :style="{
            borderRadius: info.style.type == 'round' ? '20rpx' : '',
            marginBottom: info.style.imgM * 2 + 'rpx',
          }"
        />
      </view>
      <view class="info2 flex aitems between" v-if="info.type.value == 2">
        <view
          class=""
          v-for="(i, ii, key) in info.value"
          :key="key"
          v-if="ii < 4"
          @click="imgChange(i)"
          :style="{
            width: `calc(100% / ${
              info.value.length > 4 ? 4 : info.value.length
            } - ${info.style.imgM}rpx)`,
            height: `${info.type.height * 2}rpx`,
            overflow: 'hidden',
          }"
        >
          <image
            :src="i.link"
            alt=""
            mode="aspectFill"
            :style="{
              borderRadius: info.style.type == 'round' ? '20rpx' : '',
              height: '100%',
            }"
          />
        </view>
      </view>

      <view class="info3" v-if="info.type.value == 3">
        <view
          class=""
          v-for="(i, index, key) in info.value"
          :key="key"
          :style="{
            height: `${info.type.height * 2}rpx`,
            marginRight: `${info.style.imgM * 2}rpx`,
          }"
          @click="imgChange(i)"
        >
          <image
            :src="i.link"
            mode="heightFix"
            alt=""
            :style="{
              borderRadius: info.style.type == 'round' ? '20rpx' : '',
              height: '100%',
            }"
          />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { navigateTo } from "@/utils/navigateTo";
export default {
  props: {
    info: {
      default: {},
    },
  },
  mounted() {
    console.log(this.info);
  },
  methods: {
    imgChange(item) {
      navigateTo(item);
    },
  },
};
</script>

<style lang="scss" scoped>
.imgModule {
  position: relative;
  .hot {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 0px;
    height: 0px;
  }
  .info1 {
    width: 100%;

    image {
      width: 100%;
      display: flex;
    }
  }

  ::-webkit-scrollbar {
    display: none;
  }

  .info2 {
    image {
      width: 100%;
      display: flex;
      object-fit: cover;
    }
  }

  .info3 {
    overflow-x: scroll;
    white-space: nowrap;

    > view {
      display: inline-block;

      image {
        width: 100%;
        display: flex;
        object-fit: cover;
      }
    }
  }
}
</style>
